<template>
  <div class="team-list">
    <div class="fixed-search-bar">
      <div class="search-row">
        <div class="search-input-wrap">
          <span class="icon-search"></span>
          <input v-model="search" placeholder="搜索班组名称" />
        </div>
        <button class="my-teams-btn" @click="showMyTeams">我的班组</button>
        <select v-model="type" class="type-select">
          <option value="">全部类型</option>
          <option value="维修">维修班组</option>
          <option value="安装">安装班组</option>
          <option value="保养">保养班组</option>
        </select>
      </div>
    </div>
    <div class="team-card" v-for="team in filteredTeams" :key="team.id" @click="showTeamDetail(team.id)">
      <div class="team-header">
        <span class="team-title">{{ team.name }}</span>
        <span class="team-status" :class="team.joined ? 'joined' : 'not-joined'">
          {{ team.joined ? '已加入' : '未加入' }}
        </span>
      </div>
      <div class="team-info">
        <div>类型：{{ team.type }}</div>
        <div>成员数量：{{ team.members }}人</div>
        <div>创建时间：{{ team.createdAt }}</div>
      </div>
      <div class="team-actions">
        <button v-if="!team.joined" class="join" @click.stop="joinTeam(team)">申请加入</button>
        <button v-if="team.joined" class="joined" disabled>已加入</button>
        <button v-if="!team.collected" class="collect" @click.stop="collectTeam(team)">收藏</button>
        <button v-else class="uncollect" @click.stop="uncollectTeam(team)">取消收藏</button>
      </div>
    </div>
    <div class="fixed-bottom">
      <div class="pagination">
        <span>每页显示：</span>
        <select v-model="pageSize">
          <option :value="10">10条</option>
          <option :value="20">20条</option>
        </select>
        <button class="fav-btn" :class="{active: showCollectedOnly}" @click="toggleCollected">收藏</button>
        <button v-for="p in totalPages" :key="p" :class="{'active': page===p}" @click="page=p">{{ p }}</button>
      </div>
      <div class="footer-btns">
        <button class="create" @click="showCreateTeam">+ 创建新班组</button>
        <button class="review" @click="showReviewApplications">审核申请</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineEmits, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useTeamStore } from '../stores/TeamStatsStore.js'

const router = useRouter()
const teamStore = useTeamStore()

const search = ref('')
const type = ref('')
const filterType = ref('all') // 'all' | 'my'
const page = ref(1)
const pageSize = ref(10)
const showCollectedOnly = ref(false)

const filteredTeams = computed(() => {
  let teams = teamStore.teams
  if (search.value) {
    teams = teams.filter(t => t.name.includes(search.value))
  }
  if (type.value) {
    teams = teams.filter(t => t.type === type.value)
  }
  if (filterType.value === 'my') {
    teams = teams.filter(t => t.joined)
  }
  if (showCollectedOnly.value) {
    teams = teams.filter(t => t.collected)
  }
  // 分页
  const start = (page.value - 1) * pageSize.value
  return teams.slice(start, start + pageSize.value)
})

const totalPages = computed(() => {
  let teams = teamStore.teams
  if (search.value) teams = teams.filter(t => t.name.includes(search.value))
  if (type.value) teams = teams.filter(t => t.type === type.value)
  if (filterType.value === 'my') teams = teams.filter(t => t.joined)
  if (showCollectedOnly.value) teams = teams.filter(t => t.collected)
  return Math.ceil(teams.length / pageSize.value)
})

function collectTeam(team) {
  teamStore.toggleCollect(team.id)
}
function uncollectTeam(team) {
  teamStore.toggleCollect(team.id)
}
function joinTeam(team) {
  teamStore.joinTeam(team.id)
}
function toggleCollected() {
  showCollectedOnly.value = !showCollectedOnly.value
  page.value = 1
}

function showTeamDetail(teamId) {
  router.push(`/team-detail/${teamId}`)
}

function showCreateTeam() {
  router.push('/create-team')
}

function showReviewApplications() {
  router.push('/review-applications')
}

function showMyTeams() {
  router.push('/my-teams')
}

onMounted(() => {
  // No need to add scroll event listeners as the bottom bar is always visible
})
onUnmounted(() => {
  // No need to remove scroll event listeners as the bottom bar is always visible
})

defineEmits(['show-create-team', 'show-detail', 'show-my-teams'])
</script>

<style scoped>
.team-list {
  max-width: 375px;
  margin: 0 auto;
  padding: 64px 0 110px 0; /* 顶部64px为搜索栏高度 */
  background: #f7f8fa;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}
.fixed-search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 375px;
  z-index: 102;
  background: #fff;
  padding-top: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: box-shadow 0.25s, background 0.25s;
  animation: sticky-fade-in 0.4s;
}
@keyframes sticky-fade-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 12px;
  background: #fff;
}
.search-input-wrap {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
}
.search-input-wrap input {
  width: 100%;
  min-width: 0;
  padding: 7px 12px 7px 32px;
  border: none;
  border-radius: 0;
  background: #f5f6fa;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}
.icon-search {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="%23888" stroke-width="2"/><path d="M12 12l2.5 2.5" stroke="%23888" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat;
}
.my-teams-btn {
  width: 90px;
  min-width: 70px;
  max-width: 110px;
  text-align: center;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 7px 0;
  font-size: 15px;
  margin: 0 4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.type-select {
  width: 100px;
  min-width: 80px;
  max-width: 120px;
  border: 1px solid #e5e6eb;
  border-radius: 0;
  padding: 7px 0;
  font-size: 15px;
  background: #fff;
  color: #222;
  outline: none;
  text-align: center;
  flex-shrink: 0;
}
.team-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #f0f1f2;
  padding: 18px 20px 16px 12px;
  margin: 0 4px 18px 4px;
  position: relative;
}
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.team-title {
  font-weight: bold;
  font-size: 18px;
  color: #222;
  padding-right: 0;
  box-sizing: border-box;
}
.team-status {
  font-size: 14px;
  border-radius: 12px;
  padding: 2px 16px;
  font-weight: 500;
  position: static;
  margin-left: 12px;
}
.team-status.joined {
  background: #f0f6ff;
  color: #409eff;
}
.team-status.not-joined {
  background: #f5f5f5;
  color: #888;
}
.team-info {
  color: #888;
  font-size: 14px;
  margin: 10px 0 0 0;
  line-height: 1.7;
  text-align: left;
}
.team-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  margin-left: 0;
}
.join {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.collect {
  background: #fff;
  color: #409eff;
  border: 1px solid #409eff;
  border-radius: 8px;
  padding: 7px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.uncollect {
  background: #fff;
  color: #888;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 7px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.joined {
  background: #f0f6ff;
  color: #409eff;
  border: none;
  border-radius: 8px;
  padding: 7px 24px;
  font-size: 15px;
  font-weight: 500;
}
.pagination { display: flex; align-items: center; gap: 4px; margin: 12px 0; }
.pagination button.active { background: #409eff; color: #fff; }
.footer-btns { display: flex; gap: 12px; margin-top: 16px; }
.create, .review { flex: 1; background: #409eff; color: #fff; border: none; border-radius: 4px; padding: 10px 0; font-size: 16px; }
.review { background: #67c23a; }
.fav-btn {
  border: 1px solid #ccc;
  background: #fff;
  color: #888;
  border-radius: 4px;
  padding: 2px 14px;
  margin: 0 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.fav-btn.active {
  border: 1px solid #409eff;
  color: #fff;
  background: #409eff;
}
.fixed-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 56px;
  width: 100%;
  max-width: 375px;
  background: #fff;
  z-index: 101;
  box-shadow: 0 -2px 8px #f0f1f2;
  padding-bottom: 6px;
  padding-left: 16px;
  padding-right: 16px;
  transition: bottom 0.3s, opacity 0.3s;
}
.fixed-bottom.hidden {
  bottom: -120px;
  opacity: 0;
  pointer-events: none;
}
</style> 